<template>
	<div style="height:100%;width:100%;position:relative;" ref="maindev">
		<div class="pagetop" ref="buttondiv">
			<table style="width:100%;font-size:12px;border-spacing: 5px;" border="0">
				<tr>
					<td align="center">生成日期</td>
					<td>
						<el-date-picker
							v-model="datetime1"
							type="date"
							placeholder="开始日期"
							value-format="yyyy-MM-dd 00:00:00"
							size="mini"
							:clearable="false"
							style="width:160px"
						></el-date-picker>
					</td>
					<td align="center">至</td>
					<td>
						<el-date-picker
							v-model="datetime2"
							type="date"
							placeholder="结束日期"
							value-format="yyyy-MM-dd 23:59:59"
							size="mini"
							:clearable="false"
							style="width:160px"
						></el-date-picker>
					</td>
					<td></td>
					<td colspan="7">
						<el-checkbox v-model="deptnoflag" true-label="1" false-label="0" @change="clearData()"
							>科室</el-checkbox
						>
						<el-checkbox v-model="pattypeflag" true-label="1" false-label="0" @change="clearData()"
							>病人类型</el-checkbox
						>
						<el-checkbox v-model="specimenflag" true-label="1" false-label="0" @change="clearData()"
							>标本类型</el-checkbox
						>
						<el-checkbox v-model="emerflag" true-label="1" false-label="0" @change="clearData()"
							>加急</el-checkbox
						>
						<el-checkbox v-model="yearflag" true-label="1" false-label="0" @change="clearData()"
							>年</el-checkbox
						>
						<el-checkbox v-model="monthflag" true-label="1" false-label="0" @change="clearData()"
							>月</el-checkbox
						>
						<el-checkbox v-model="dayflag" true-label="1" false-label="0" @change="clearData()"
							>日</el-checkbox
						>
					</td>
				</tr>
				<tr>
					<td align="center">病区</td>
					<td>
						<el-select
							v-model="wardno"
							@dblclick.native="popMultipleChk(wardno, 'wardno', wardOption, '病区选择')"
							filterable
							clearable
							style="width:160px"
						>
							<el-option
								v-for="(item, index) in wardOption"
								:key="index"
								:value="item.data"
								:label="item.display"
							>
							</el-option>
						</el-select>
					</td>
					<td align="center">检验组</td>
					<td>
						<el-select
							v-model="labgroupid"
							@dblclick.native="
								popMultipleChk(labgroupid, 'labgroupid', labgroupOption, '请选择检验组别')
							"
							filterable
							clearable
							style="width:160px"
						>
							<el-option
								v-for="(item, index) in labgroupOption"
								:key="index"
								:value="item.data"
								:label="item.display"
							></el-option>
						</el-select>
					</td>
					<td align="center">报告单元</td>
					<td>
						<el-select
							v-model="rptunitid"
							@dblclick.native="popMultipleChk(rptunitid, 'rptunitid', rptunitOption, '请选择报告单元')"
							filterable
							clearable
							style="width:160px"
						>
							<el-option
								v-for="(item, index) in rptunitOption"
								:key="index"
								:value="item.data"
								:label="item.display"
							></el-option>
						</el-select>
					</td>
					<td align="center">科室</td>
					<td>
						<el-select
							v-model="reqdeptno"
							@dblclick.native="popMultipleChk(reqdeptno, 'reqdeptno', deptOption, '科室选择')"
							filterable
							clearable
							style="width:160px"
						>
							<el-option
								v-for="(item, index) in deptOption"
								:key="index"
								:value="item.data"
								:label="item.display"
							>
							</el-option>
						</el-select>
					</td>
					<td :width="buttonwidth"></td>
				</tr>
				<tr>
					<td colspan="13" align="right">
						<el-button @click.native="QueryData()" v-has="'PINQUERY'" type="primary" icon="el-icon-search"
							>查询</el-button
						>
						<el-button @click.native="BtnExport" icon="el-icon-upload2">导出</el-button>
					</td>
				</tr>
			</table>
		</div>
		<div class="pagecenter" ref="centerdev">
			<vxe-table
				show-overflow
				ref="xTable1"
				:height="tableheight"
				:loading="loading"
				:data.sync="tableData"
				class="editable-footer"
				:footer-method="footerMethod"
				:footer-cell-class-name="footerCellClassName"
				border
				size="mini"
				show-header-overflow
				highlight-current-row
				highlight-hover-row
				show-footer
				resizable
				stripe
			>
				<vxe-table-column
					field="req_deptno"
					title="科室"
					width="100"
					header-align="center"
					align="center"
					v-if="deptnoflag == '1'"
				></vxe-table-column>
				<vxe-table-column
					field="specimen_code"
					title="样本类型"
					width="80"
					header-align="center"
					align="center"
					v-if="specimenflag == '1'"
				></vxe-table-column>
				<vxe-table-column
					field="pat_typecode"
					title="病人类型"
					width="80"
					header-align="center"
					align="center"
					v-if="pattypeflag == '1'"
				></vxe-table-column>
				<vxe-table-column
					field="emer_flag"
					title="加急"
					width="80"
					header-align="center"
					align="center"
					v-if="emerflag == '1'"
				>
					<template v-slot="{ row }">
						<div style="color:red">{{ row.emer_flag == '1' ? '急' : '' }}</div>
					</template>
				</vxe-table-column>
				<vxe-table-column
					field="year"
					title="年"
					width="40"
					header-align="center"
					align="center"
					v-if="yearflag == '1'"
				></vxe-table-column>
				<vxe-table-column
					field="month"
					title="月"
					width="60"
					header-align="center"
					v-if="monthflag == '1'"
					align="center"
				></vxe-table-column>
				<vxe-table-column
					field="day"
					title="日"
					width="80"
					header-align="center"
					v-if="dayflag == '1'"
					align="center"
				></vxe-table-column>
				<vxe-table-column
					field="cp_samplecount"
					title="合计"
					width="80"
					header-align="center"
					align="center"
				></vxe-table-column>
				<vxe-table-column field="cp_rate" title="百分比" width="80" header-align="center" align="center">
					<template v-slot="{ row }">
						<div>{{ row.cp_rate }}%</div>
					</template>
				</vxe-table-column>
				<vxe-table-column
					v-for="(list, lindex) in tableColumns"
					:key="lindex"
					:field="list.Code"
					:title="list.Name"
					align="center"
					width="80"
					header-align="center"
					show-overflow
				>
				</vxe-table-column>
			</vxe-table>
		</div>

		<el-dialog
			width="900px"
			v-el-drag-dialog
			:append-to-body="true"
			:close-on-click-modal="false"
			:title="multichktitle"
			:visible.sync="dialogMultipleVisible"
			:destroy-on-close="true"
			v-if="dialogMultipleVisible"
		>
			<rm-SqlMultiple
				:leftOption="option1"
				:rightOption="option2"
				:name="fieldname"
				@change="closedialog"
				ref="multidialog"
			></rm-SqlMultiple>
		</el-dialog>
	</div>
</template>

<script type="text/javascript">
import XEUtils from 'xe-utils';
export default {
	name: 'LIS641',
	data() {
		return {
			buttonwidth: '',
			//筛选项目
			datetime1: '',
			datetime2: '',
			//统计项目
			deptnoflag: '0',
			specimenflag: '0',
			emerflag: '0',
			pattypeflag: '0',
			yearflag: '0',
			monthflag: '0',
			dayflag: '0',
			//查询条件
			wardno: '', //病区
			reqdeptno: '', //科室
			labgroupid: '', //检验组别
			rptunitid: '', //报告单元
			//表格属性
			tableheight: 'auto',
			loading: false,

			//表格内容
			totalData: [],
			tableData: [],
			tableColumns: [],
			tableColumn: [],
			currentindex: -1,
			//多选弹窗
			rptunitOption: [],
			deptOption: [],
			labgroupOption: [],
			wardOption: [],
			multichktitle: '',
			dialogMultipleVisible: false,
			option1: [],
			option2: [],
			fieldname: '',
		};
	},
	created() {
		this.QueryOption();
		this.getButtonWidth();
	},
	updated() {
		this.getButtonWidth();
	},
	methods: {
		getButtonWidth() {
			if (this.$refs.buttondiv) {
				this.buttonwidth =
					this.$refs.buttondiv.parentElement.parentElement.parentElement.parentElement.offsetWidth -
					1000 +
					'px';
			}
		},
		QueryData() {
			this.loading = true;
			this.$tool
				.request({
					url: 'LIS/LIS6/LIS641',
					method: 'post',
					data: {
						action: 'queryData',
						startdate: this.datetime1,
						enddate: this.datetime2,
						wardno: this.wardno,
						labgroupid: this.labgroupid,
						rptunitid: this.rptunitid,
						reqdeptno: this.reqdeptno,

						deptnoflag: this.deptnoflag,
						specimenflag: this.specimenflag,
						pattypeflag: this.pattypeflag,
						emerflag: this.emerflag,
						yearflag: this.yearflag,
						monthflag: this.monthflag,
						dayflag: this.dayflag,
					},
				})
				.then((res) => {
					this.loading = false;
					this.tableData = res.Data;
					if (this.tableData.length > 0) this.tableColumns = res.Cols;
				});
		},
		QueryOption() {
			this.$tool
				.request({
					url: 'LIS/LIS6/LIS641',
					method: 'post',
					data: {
						action: 'initOption',
					},
				})
				.then((res) => {
					this.deptOption = res.deptOption;
					this.rptunitOption = res.rptunitOption;
					this.wardOption = res.wardOption;
					this.labgroupOption = res.labgroupOption;
					this.datetime1 = res.datetime + ' 00:00:00';
					this.datetime2 = res.datetime + ' 23:59:59';
				});
		},
		footerMethod({ columns, data }) {
			return [
				columns.map((column, columnIndex) => {
					var a = columns.indexOf(columns.find((x) => x.property == 'cp_samplecount'));
					var b = columns.indexOf(columns.find((x) => x.property == 'cp_rate'));

					if (columnIndex === 0) {
						return '总计';
					} else if (columnIndex === b) {
						if (this.tableData.length > 0) return '100%';
						else return null;
					} else if (columnIndex >= a && columnIndex != b) {
						if (this.tableData.length > 0) return this.SumAll(this.tableData, column.property);
						else return null;
					}
					// if (["cp_samplecnt"].includes(column.property)) {
					//     return this.SumAll(this.tableData, column.property);
					//     //return this.$utils.sum(data, column.property);
					// }
					// if (['cp_samplecount'].includes(column.property)) {
					// 	return this.SumAll(this.tableData, column.property);
					// }

					return null;
				}),
			];
		},
		footerCellClassName({ $rowIndex, column, columnIndex }) {},
		SumAll(data, property) {
			var plus = 0;
			if (data) {
				for (let i = 0, len = data.length; i < len; i++) {
					plus += data[i][property] - 0;
				}
			}

			return plus;
		},
		popMultipleChk(e, fieldname, option, title) {
			let temp = XEUtils.clone(option, true);
			this.option1 = [];
			this.option2 = [];
			if (e != '') {
				let k = e.split(',');
				k.forEach((item) => {
					let ndata = temp.find((m) => m.data == item);
					if (ndata != undefined && ndata != null) {
						this.option2.push(ndata);
					}
				});
				temp.forEach((item) => {
					if (k.indexOf(item.data + '') < 0) {
						this.option1.push(item);
					}
				});
			} else {
				this.option1 = temp;
			}
			this.fieldname = fieldname;
			this.multichktitle = title;
			this.dialogMultipleVisible = true;
		},
		closedialog(value, name) {
			if (value != 'close') {
				this[name] = value;
			}
			this.dialogMultipleVisible = false;
		},
		BtnExport() {
			this.$refs.xTable1.exportCsv({ filename: 'LIS641危急值统计' });
		},
		clearData() {
			this.tableData = [];
			//会导致表头渲染错位
			// this.tableColumns = [];
		},
	},
};
</script>

<style scoped>
.pagetop {
	width: 100%;
	height: 100px;
	display: -webkit-box;
	-webkit-box-pack: left;
	-webkit-box-align: center;
	border: 1px solid #ccc;
	position: absolute;
	z-index: 99;
}

.pagecenter {
	position: absolute;
	top: 105px;
	width: 100%;
	left: 0;
	bottom: 0px;
	overflow: auto;
}
table tr td:nth-child(1) {
	width: 80px;
}
.left_nav {
	width: 20%;
	height: 100%;
	border-right: 1px solid #ccc;
	padding: 0px 0px 0px 0px;
	float: left;
	display: inline;
}
.left_nav div {
	cursor: pointer;
	height: 40px;
	width: 100%;
	float: left;
	padding-left: 20px;
	line-height: 40px;
}
.left_nav .active {
	background-color: DeepSkyBlue;
}
.right_nav {
	width: 80%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	float: left;
	display: inline;
}
::v-deep .el-input--suffix .el-input__inner {
	padding-right: 10px;
}
</style>
